<template>
	<up-tabbar
		:value="active"
		@change="changeBar"
		:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true"
	>
		<up-tabbar-item v-for="(item, index) in tabList" :key="index" :text="item.text" :icon="item.icon" ></up-tabbar-item>
	</up-tabbar>
</template>

<script setup>
	import { ref } from 'vue'
	import { useTabbarStore } from '@/store/index.js'
	
	const tabbarStore = useTabbarStore()
	const active = ref(tabbarStore.active)
	const tabList = ref([
		{
			pagePath: "pages/home/home",
			text: "云贴",
			icon: 'home'
		},{
			pagePath: "pages/publish/publish",
			text: "发布",
			icon: 'photo'
		},{
			pagePath: "pages/user/user",
			text: "我的",
			icon: 'account'
		}
	])
	
	const changeBar = (e) => {
		if(tabbarStore.active !== e){
			active.value = tabbarStore.active
			tabbarStore.setActive(e)
			// 切换页面
			uni.switchTab({
				url: '/' + tabList.value[e].pagePath
			})
		}
	}
</script>

